<template>
  <div>News</div>
   <div class="news">
    <nav class="news-list">
      <RouterLink v-for="news in newsList" :key="news.id" 
      :to="{
        name:'newsDetail', // 只能用 name 跳转
        params :{
          id: news.id,
          content: news.content
        }
      }">
        {{news.name}}
      </RouterLink>
    </nav>
    <div class="news-detail">
      <RouterView/>
    </div>
  </div>
</template>


<script lang="ts">
   export default {
       name: 'News',
   }
</script>


<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, watch} from 'vue'

   let newsList = ref([{
    id: 1,
    name: '张三',
    content: '张三-----'
   },{
    id: 2,
    name: '李四',
    content: '李四------'
   }])
</script>

<style scoped lang="less">
.news {
  display: flex;
  min-height: 100vh;
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
}

.news-list {
  width: 250px;
  background-color: #ffffff;
  padding: 20px;
  border-right: 1px solid #ddd;
  overflow-y: auto;
}

.news-list h3 {
  margin-top: 0;
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
}

.news-list a {
  display: block;
  padding: 10px 12px;
  margin-bottom: 8px;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s;
  background-color: #f9f9f9;
}

.news-list a:hover {
  background-color: #e0e0e0;
}

.news-list a.router-link-active {
  background-color: #42b983;
  color: white;
  font-weight: bold;
}

.news-detail {
  flex: 2;
  padding: 20px;
  background-color: #8bb311;
  margin-left: 20px;
  box-shadow: 0 2px 6px rgba(120, 231, 159, 0.05);
  overflow-y: auto;
}
</style>